<template>
  <div class="mod-accessrecordsgoods">
    <!--用户总数-->
    <div class="user_total">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="statistics" style="background:#409eff">
            <div class="title">
              <p>用户统计</p>
            </div>
            <div class="num">{{ userTotal }}</div>
            <div class="tip">当前总用户数量</div>
          </div>
        </el-col>
        <el-col :span="18">
          <!-- 非活跃用户统计-->
          <div class="user_active">
            <div class="ua_statistics" id="userActiveChart"></div>
          </div>
        </el-col>
      </el-row>


    </div>
    <!--用户新增统计-->
    <div class="contentCss">
      <el-form :inline="true" :model="searchForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-date-picker
            v-model="searchForm.addTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            :picker-options="pickerOptions"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="statisticsCss" id="userAddChart"></div>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {addTime: null},
      userActiveChart: null,
      userTotal: null,
      userAddChart: null,
      pickerMinDate: null,
      pickerMaxDate: null,
      day31: 31 * 24 * 3600 * 1000,
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          debugger
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return (time.getTime() > (this.pickerMinDate + this.day31)) || (time.getTime() < (this.pickerMinDate - this.day31));
          }
          return false;
        }
      }
    }
  },
  mounted() {
    this.getUserTotalList()
    this.getUserActiveList()
    this.getDataList()
  },

  methods: {
    //用户总数
    getUserTotalList() {
      this.$http({
        url: '/mall/accessStatistics/userTotalStatistics',
        method: 'get'
      }).then((res) => {
        this.userTotal = res.data.data
      })
    },
    //非活跃用户统计
    getUserActiveList() {
      this.$http({
        url: '/mall/accessStatistics/userActiveStatistics',
        method: 'get'
      }).then((res) => {
        this.initUserActiveChart(res.data.data)
      })
    },
    initUserActiveChart(data) {
      console.log(data)
      let option = {
        title: {
          text: '用户活跃统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              {value: data.activeNum, name: '活跃用户'},
              {value: data.noActiveNum, name: '非活跃用户'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.userActiveChart = this.$echarts.init(document.getElementById('userActiveChart'))
      this.$nextTick(() => {
        this.userActiveChart.setOption(option)
      })

    },
    //用户新增统计
    getDataList() {
      let dataForm = {}
      if (this.searchForm.addTime) {
        dataForm.addTimeStart = this.searchForm.addTime[0]
        dataForm.addTimeEnd = this.searchForm.addTime[1]
      }
      this.$http({
        url: '/mall/accessStatistics/userAddStatistics',
        method: 'get',
        params: dataForm
      }).then((res) => {
        this.initUserAddChart(res.data.data)
      })
    },
    initUserAddChart(data) {
      console.log(data)
      let option = {
        title: {
          text: '用户新增量统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        // 设置折线图的位置
        xAxis: {
          name: '日期',
          data: data.pageTitleData
        },
        yAxis: {
          type: 'value',
          name: '数量',
          interval: 1
        },
        series: [
          {
            data: data.pageSeriesData,
            type: 'line',
            name: '数量',
            lineStyle: {
              normal: {
                color: '#409EFF', // 折线线条颜色
              }
            },
            itemStyle: {
              // 设置线条上点的颜色
              normal: {
                color: '#409EFF',
              },
            },
          }
        ]
      }
      this.userAddChart = this.$echarts.init(document.getElementById('userAddChart'))
      this.$nextTick(() => {
        this.userAddChart.setOption(option)
      })

    },

  }
}
</script>
<style scoped lang="scss">
.statisticsCss {
  width: 100%;
  height: 550px
}

.user_total {
  width: 100%;
  align-content: center;
  .ua_statistics{
    height: 300px
  }
}

.el-row {
  padding: 0 9px;

  .statistics {
    color: white;
    height: 100px;
    border-radius: 4px;
    padding: 0 8px;

    .title {
      display: flex; // 弹性布局
      justify-content: space-between; // 两边对齐
      align-items: center; // 垂直居中
    }

    p {
      font-size: 13px;
      font-weight: bold;
    }

    .num {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    .tip {
      font-size: 12px;
    }
  }
}
</style>
